<template>
	<view class="info">
		<view class="current pt-re">
			<view class="left" @click="back"></view>
			<view class="" v-if="titleText == 'introduce'">
				<view  class="center">个人信息</view>
				<view class="own" >个人信息简介</view>
			</view>
			<view class="" v-if="titleText == 'edit'">
				<view class="center">修改个人信息</view>
				<view class="own" >修改个人信息</view>
			</view>
			<view class="protect">全程守护你的隐私</view>	
		</view>
		<view class="info-main">
			<view class="mes1">
				<!-- :rules="rules" -->
				<u--form labelPosition="left" :model="formData"  ref="form1">
					 <!-- :required="type!=1" -->
					<u-form-item label="姓名" prop="nickname" borderBottom ref="item1" labelWidth="100">
						<view class="" style="color: darkgray; text-align: right;"  v-if="titleText != 'edit'">{{formData.nickname?formData.nickname:''}}</view>
						<view class="input_box" style="color: darkgray !important; text-align: right;">
							<u--input v-model="formData.nickname" v-if="titleText == 'edit'"  border="none" placeholder="请输入内容" ></u--input>
						</view>
						
					</u-form-item>
					<u-form-item label="性别" labelWidth="100" prop="gender" borderBottom ref="item1" @click="changeGender">
						<view class="" style="color: darkgray;text-align: right;">{{formData.gender?formData.gender:''}}</view>
						<!-- <u--input  border="none" disabled></u--input> -->
						<u-icon slot="right" :name="titleText == 'edit' ? 'arrow-right' : ''" ></u-icon>
					</u-form-item>
					<u-form-item  label="出生日期" prop="birthday"  borderBottom ref="item1" labelWidth="100"  @click="changeAge">
						<view class="" style="color: darkgray;text-align: right;" >{{formData.birthday?formData.birthday:""}}</view>
						<u-icon slot="right" :name=" titleText == 'edit' ? 'arrow-right' : ''" ></u-icon>
					</u-form-item>
					<u-form-item label="项目职位" prop="project_position" :borderBottom="false" ref="item1" labelWidth="100"  @click="changePosition">
						<view class="" style="color: darkgray;text-align: right;">{{formData.project_position?formData.project_position:''}}</view>
						<u-icon slot="right" :name=" titleText == 'edit' ? 'arrow-right' : ''" ></u-icon>
					</u-form-item>
				</u--form>
			</view>
			<view class="mes3">
				<u-form-item label="个人简介" prop="bio" :borderBottom="false" ref="item1" labelWidth="100" labelPosition="top"  >
					<u-textarea placeholder="请输入个人简介" v-model="formData.bio" :count="false" style="height: 400rpx;" :disabled="titleText != 'edit'" maxlength="50" count border="0" ></u-textarea>
				</u-form-item>
			</view>
			
			<view class="btn"  v-if="titleText == 'introduce'"  @click="jumpPage">
				修改个人信息
			</view>
			<view class="btn" v-if="titleText == 'edit'" @click="changeMes">
				确认修改
			</view>

		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @select="sexSelect" @close="showSex = false">
		</u-action-sheet>
		<u-action-sheet :show="showPosition" :actions="positions" title="请选择职位" @select="positionSelect" @close="showPosition = false">
		</u-action-sheet>
		<u-datetime-picker :show="showAge" v-model="value1" mode="date"  title="请选择出生日期" @confirm="ageSelect" :min-date="0" :max-date="Number(new Date())" @cancel="showAge = false"></u-datetime-picker>
	</view>
</template>

<script>
	import wxLoginPopup from '@/pages/my/wx-login-popup.vue';
	import {
		wxLogin,
		getWxPhone,
		upRegister,
		getUser,
		jobList,
		profile,
	} from '@/request/api.js';
	import {
		log
	} from 'util';
	import moment from 'moment';
	export default {
		props: {
			userInfo: {
				type: Object,
				default: null
			},
			userData: null
		},
		components: {
			wxLoginPopup
		},
		data() {
			return {
				userCode: null,
				show: false,
				showPop: false,
				mobile: '',
				showSex: false,
				showPosition: false,
				formData: {
					bio: '',
					project_position: '请选择职位',
					nickname: '',
					gender:'请选择性别',
					birthday:'请选择出生日期',
					job_id:''
				},
				value1:Number(new Date()),
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				showAge: false,
				titleText:'',
				positions:[],
			}
		},
		onLoad(options){
			if(options){
				this.titleText = options.type
			}
			this.getUser()
			
		},
		onShow(){
			
		},
		methods: {
			changePosition(){
				this.showPosition = this.titleText == 'edit';
				this.getJobList()
			},
			// 获取个人信息
			getUser(){
				getUser().then(res => {
					// this.formData
					this.pageckForIn(this.formData,res.data)
					this.formData.bio = this.formData.bio != null ? this.formData.bio: ''
					this.getJobList()
				})
			},
			pageckForIn(ar1,ar2){
				Object.keys(ar1).forEach(key => {
					ar1[key] = ar2[key]
				})
				return ar1
			},
			// 获取职位
			getJobList() {
				jobList().then(res => {
					this.positions = res.data.map(item => {
						return{
							...item,
							name: item.job_name,
						}
					})
					this.formData.project_position = this.positions.filter(item => item.id == this.formData.job_id)[0].name
				})
			},
			changeGender(){
				this.showSex = this.titleText == 'edit';
				// hideKeyboard()
			},
			changeAge(){
				this.showAge = this.titleText == 'edit';
			},
			sexSelect(e) {
				this.formData.gender = e.name
			},
			positionSelect(e){
				console.log(e,'eee')
				this.formData.project_position = e.name,
				this.formData.job_id = e.id
			},
			ageSelect(e){
				this.formData.birthday = moment(e.value).format('YYYY-MM-DD')
				this.showAge = false
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			refuse() {
				uni.clearStorageSync('token')
				this.show = false
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showPop = false
				// console.log('close');
			},
			/* 个人信息 */
			jumpPage() {
				this.titleText = 'edit'
				// uni.navigateTo({
				// 	url: '/my_pages/myInfo/myInfo?type = edit'
				// })
			},
			changeMes(){
				console.log(this.formData,'this.formData')
				if (this.formData.nickname == '') return uni.$u.toast('请输入姓名')
				if (this.formData.gender == '') return uni.$u.toast('请选择性别')
				if (this.formData.birthday == '') return uni.$u.toast('请选择出生日期')
				if (this.formData.project_position == '') return uni.$u.toast('请选择职位')
				if (this.formData.bio == '') return uni.$u.toast('请输入个人简介')
				
				profile(this.formData).then(res => {
					uni.$u.toast(res.msg)
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/my/my'
						})
					},2000)
					
					// 	if (res.code == 1) {
					// 		uni.navigateTo({
					// 			url: '/my_pages/components/success?title=个人信息已保存成功'
					// 		})
					// 	}
					// })
				})
				// .catch(errors => {
				// 	uni.$u.toast('请正确填写信息')
				// })
			},
			/* 登录 */
			getPhoneNumber(e) {
				getWxPhone({
					code: e.detail.code
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.mobile = res.data.mobile
						this.showPop = true
					}
					/* this.getWxUserinfo() */
				})
			}

		}
	}
</script>

<style>
	.mes1 input{
		text-align: right;
	}
	.input_box input{
		color: darkgray !important;
		text-align: right !important;
	}
	/deep/ .u-action-sheet{
		height: 600rpx;
		overflow: scroll;
	}
</style>

<style lang="scss" scoped>
	.input_box{
		/deep/ .input{
			.u-input__input{
				color: #darkgray !important;
				
				text-align: right !important;
			}
		}
	}
	.left {
		width: 30rpx;
		height: 38rpx;
		position: fixed;
		top: 96rpx;
		left: 16rpx;
		padding: 20rpx;
		margin: 30rpx;
		text-align: center;
		background: url(../../static/my/left.png);
		background-repeat:no-repeat;
		box-sizing: border-box;
	}
	.center{
		position: fixed;
		top: 110rpx;
		left: 40%;
	}
	.own{
		position: absolute;
		top: 240rpx;
		left: 4%;
		color: #081738;
		font-size: 40rpx;
		font-weight: 500;
	}
	.protect{
		position: absolute;
		top: 300rpx;
		left: 4%;
		font-size: 28rpx;
		color: #505050;
	}
	.info{
		background: #f7f8f6;
		position: relative;
		min-height: 100vh;
	}
	.info-main{
		width: 100%;
		position: relative;
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: center;
		    margin-top: -100rpx;
	}
	.mes1,.mes2,.mes3{
		// position: absolute;
		width: 700rpx;
		// height: 340rpx;
		background: #FFFFFF;
		border-radius: 10px;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		margin: 15rpx 0;

		.u-form-item{
			border: 0.5px solid rgba(217, 217, 217, 0.6);
		}
	}
	.mes2{
		top: 692rpx;
	}
	.mes3{
		top: 1000rpx;
		// height: 340rpx;
	}
	.btn{
		width: 90%;
		// position: absolute;
		height: 92rpx;
		left: 30rpx;
		top: 1480rpx;
		bottom: 30rpx;
		background: #47578E;
		opacity: 0.8;
		padding: 13px 30px;
		text-align: center;
		color: #fff;
		box-sizing: border-box;
		border-radius: 30px;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	button::after {
		border: none;
	}

	.custom-style {
		color: #ff0000;
		width: 400rpx;
	}

	button {
		background-color: transparent;
		color: #fff;
	}

	.RealName {
		display: flex;
		background: #fff;
		z-index: 1;
		margin: 160rpx 30rpx;
		align-items: center;
		border-radius: 15px;

		.left {
			padding: 15rpx;
			flex: 1;
		}

		.authe {
			margin-right: 15rpx;
		}

		.tip {
			color: #979797;
			margin-top: 8rpx;
			margin-bottom: 8rpx;
			font-size: 26rpx;
		}
	}

	.empty {
		background-color: #f1f1f1;
	}

	.login {
		font-size: 42upx;
	}

	.iName-phone {
		padding: 15upx 20upx;
		height: 140upx;
		font-size: 28rpx;
		color: #09173A;
	}

	.iName {
		color: #FFFFFF;
		padding: 5rpx 20rpx;
		font-size: 32rpx;
	}

	.userInfo {
		position: absolute;
		top: 150upx;
		color: #fff;
		width: 100%;
		padding: 0 30upx;
	}

	.icon-setup {
		width: 30upx;
		height: 30upx;
		position: absolute;
		right: 30upx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 999;
	}

	.avatar {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
	}

	.phone {
		width: 134rpx;
		margin-left: 20rpx;
		display: flex;
		color: rgba(255, 255, 255, 0.8);;
		background: rgba(186, 186, 186, 0.1);
		padding: 5rpx 20rpx;
		border-radius: 28rpx;
		font-size: 24rpx;
		padding: 5rpx 20rpx;
	}

	.top-img {
		right: 0;
		top: 0;
		width: 360upx;
		height: 360upx;
		z-index: 9;
	}

	.current {
		background: url(../../static/my/ownInfo.jpg);
		// background: url(../../static/selectBot.png);
		background-size: 100% 100%;
		height: 476rpx;
		background-repeat: no-repeat;
		// padding: 5rpx 20rpx;
	}

	.arcbottom {
		// width: 200%;
		// position: relative;
		// height: 300upx;
		// background-color: $common-color;
		// border-bottom-left-radius: 140%;
		// border-bottom-right-radius: 140%;
		// left: 50%;
		// transform: translateX(-50%);
	}
</style>
